<template>
  <div>
    <div class="box"></div>
    <el-tree :data="data" :props="defaultProps"></el-tree>
  </div>
</template>

<script>
export default {
  data() {
    return {
      defaultProps: {
        label(data) {
          if (data.__config__?.componentName)
            return data.__config__?.componentName;
          if (data.__config__?.label || data.__config__?.formId)
            return `${data.__config__.label}: ${data.__config__.formId}`;
          if (data.id) return data.id;
          return data.label;
        },
      },
      data: [
        {
          __config__: {
            tag: "form-table-container",
            tagType: "layout",
            tagIcon: "table-edit",
            layoutTree: true,
            formId: "field57uiw5bbhhw0",
            formKey: "field57uiw5bbhhw0",
            componentName: "表格布局",
          },
          borderWidth: 1,
          isHide: false,
          cellpadding: 8,
          tableAlign: "center",
          borderColor: "#ebeef5",
          children: [
            {
              id: "25tm2uif3jcw",
              style: {},
              children: [
                {
                  id: "248i5famnwtc",
                  style: {},
                  width: 100,
                  colspan: 2,
                  rowspan: 1,
                  children: [],
                },
                null,
              ],
            },
            {
              id: "2jdazye4e7y0",
              style: {},
              children: [
                {
                  colspan: 1,
                  rowspan: 1,
                  children: [],
                  id: "6tgrmpb3gu80",
                  width: 50,
                  style: {},
                  allowDrop: true,
                },
                {
                  colspan: 1,
                  rowspan: 1,
                  children: [],
                  id: "31vwn91e6zm0",
                  width: 50,
                  style: {},
                  allowDrop: true,
                },
              ],
            },
          ],
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.box {
  position: relative;
  width: 100px;
  height: 100px;
  background-color: #f0f0f0;
}

.box::before,
.box::after {
  content: "";
  position: absolute;
  width: 2px;
  height: 100px;
  background-color: #000;
}

.box::before {
  left: 0;
  top: 0;
}

.box::after {
  right: 0;
  top: 0;
}

.box::top,
.box::bottom {
  content: "";
  position: absolute;
  width: 100px;
  height: 2px;
  background-color: #000;
}

.box::top {
  left: 0;
  top: 0;
}

.box::bottom {
  left: 0;
  bottom: 0;
}
</style>